
O mini-tutorial acabou. Durante o tutorial, as técnicas usadas realmente funcionam. É feijão com arroz. 
Muitos projetos para web usam o grid ajax com paginação. Pode não ser exatamente como eu fiz mas é na mesma linha.
É a mesma novela se repetindo com personagens diferentes.
O enredo da novela tem HTML5, CSS, JAVASCRIPT e JSON. Os personagens que mudam a cada versão da mesma novela chamam-se : PHP, ASP,
PYTHON, JAVA, PERL, CGI e agora modHarbour.

Depois que esses conceitos ficarem claros é que vale a pena passar para um framework, na minha opinião. E depois, quem sabe, criar o seu framework.

O último arquivo zip postado e dentro dele (pasta ex11) tem o código completo do grid.
Quem quiser pode usar como modelo para criar os seus.

** **********************

A partir desse ponto começa uma outra fase.
Vou postar como estou fazendo para linkar formulários de inclusão / alteração a partir do grid.

**

Bem, o objetivo dessa etapa é receber a chave primária para conectar o grid ao futuro formulário.
Existem diversas formas de fazer isso, a forma que eu escolhi fazer é a descrita abaixo :

(1) Primeiro uma revisão. O  arquivo dados.prg retorna um JSON no formato :

[code]
{  "Result":"OK",
   "NextPage":true,
   "PreviousPage":false,
   "Rows":[{"id":7566,"nome":"JONES"},{"id":7654,"nome":"MARTIN"},{"id":7698,"nome":"BLAKE"}]
}
[/code]

(2) O objetivo é armazenar a chave primária no grid, e usar essa chave para abrir um futuro formulário (a ser criado).
(3) Problema : como o sistema (lado cliente html) vai saber qual é a chave primária para ele usá-la para abrir o formulário ? Como o servidor (mod_harbour) vai dizer ao cliente qual é a chave ?
(4) A solução que eu adotei foi : criar um campo especial e armazenar nele a chave primária. Esse campo deve ter um nome bem diferente para evitar problemas futuros.

Vou chamar esse campo de "__pk".

Fiz uma pequena modificação no dados.prg para poder retornar esse campo.

O Json acrescentei __pk ao retorno do json

[code]
{"Result":"OK",
 "NextPage":true,
 "PreviousPage":false,
 "Rows":[{"___pk":7566,"id":7566,"nome":"JONES"},{"___pk":7654,"id":7654,"nome":"MARTIN"},{"___pk":7698,"id":7698,"nome":"BLAKE"}]}
[/code]

Tive que modificar também o brw.js para armazenar esse valor.
Mas onde armazenar ?

Eu resolvi criar um atributo (presente em cada linha do grid) e armazenar nesse atributo o valor.
O nome do atributo que eu criei é "__pk" também.

Fiz uma pequena modificação no brw.js para receber esse valor e armazenar na nova tag que eu criei.
Isso é feito dentro do $.ajax, na "função de usuário" usada na recepção dos dados.

Mais precisamente aqui :
[code]
	$('<tr ___pk=' + val.___pk + '>').html( "<td>" + val.id + "</td>" +
						<td>" + val.nome + "</td>" ).appendTo("#registros tbody");
[/code]

O HTML é a representação de uma estrutura de dados bastante conhecida: uma árvore.
Essa árvore recebeu, dos seus criadores, o nome de DOM (Document Object Model). 
O Javascript é a  linguagem que permite navegar por essa complexa estrutura. Com ele 
eu crio elementos, apago elementos e posso até criar meus próprios atributos para uso particular.
O JQuery torna o Javascript mais fácil. É uma boa porta de entrada. 

Cada linha da tabela que era assim :
[code]
<tr> <td> ... </td> etc.. </tr>
[/code]

Vai ficar assim :
[code]
<tr ___pk='valor da chave primária'> <td> ... </td> etc.. </tr>
[/code]

O contexto é esse :

[code]
 success: function( data ){
                    $("#anterior").attr("disabled", !data.PreviousPage );
                    $("#proximo").attr("disabled", !data.NextPage );
					switch ( data.Result ){
                     case 'OK':        
                        $.each( data.Rows  , function( key, val ) {
							
							$('<tr ___pk=' + val.___pk + '>').html( "<td>" + val.id + "</td>" +
										"<td>" + val.nome + "</td>" ).appendTo("#registros tbody");
                        });  
                        break;
                  }   
              }  
[/code]


Agora vou criar os botões para quando o usuário clicar nele chame o formulário.

Não vou criar o formulário agora. Vou só criar um alert para ter certeza de que o valor
da chave primária está chegando corretamente.

[code]
   // Crio a coluna extra e dentro dele coloco um botão (vai ficar um botão por linha)
	 $("#registros tbody tr").each(function() {
		$(this).append('<td><button type="button" class="btn btn-primary btn-sm">Alterar</button></td>');
     });
   // Crio eventos para quando o usuário clicar em cada botão criado	 
	 $("#registros tbody tr td button").click(function() {
        alert( $(this).closest("tr").attr('___pk') ); // <--------------- aqui o alert (no futuro será o formulário)
     });
[/code]


[b]Em resumo :[/b]

1. O tutorial acabou na postagem anterior. 
2. Daqui para frente é como estou fazendo para ligar o registro ao browser e como realizar gravações no banco (o CRUD). 
3. Os códigos são para exemplo. Não use em projetos práticos. Tem trechos que podem ser otimizados, redundâncias, etc.
4. O objetivo é ajudar. Como sempre, precisa ter o mod_harbour instalado com xampp em ambiente windows. Descompacte os zips de exemplo dentro de htdocs.
5. Como sempre, não vou me aprofundar em Javascript/HTML/Bootstrap, mas não tem como fugir dessas tecnologias. As explicações nesses tópicos são rápidas e não se aprofundam.







